<template>
  <div class="container">
    <div class="title">
      <h2>设备管理</h2>
      <h5>用于管理小区里不定期举办的各种活动</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-select v-model="formRepair.community_code" placeholder="请输入">
            <el-option
              v-for="(item,index) in selectHome"
              :key="index"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formRepair.status" placeholder="请输入">
            <el-option label="待受理" :value="0" />
            <el-option label="已受理" :value="1" />
            <el-option label="已维修" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
              v-model="formRepair.create_time"
              style="width: 220px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" size="small" @click="serachData">搜索</el-button>
          <el-button style="margin-left: 10px" size="small" @click="resect">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">

      <el-table :data="tableData">
        <el-table-column label="ID" width="40%" prop="id" />
        <el-table-column label="小区名称" prop="community.name" />
        <el-table-column label="报修人员">
          <template #default="{row}">
            {{ row.member ?row.member:'未知' }}

          </template>
        </el-table-column>
        <!-- 照片 -->
        <el-table-column label="照片">
          <template #default="{row}">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.an_photo?splitStr(`http://124.223.14.236:8881${row.an_photo}`)[0]:nullImg"
              :preview-src-list="[row.photo?splitStr(`http://124.223.14.236:8881${row.an_photo}`)[0]:nullImg]"
            />
            <!-- <img width="100px" height="100px" :src="row.an_photo?splitStr(`http://124.223.14.236:8881${row.an_photo}`)[0]:nullImg" alt=""> -->
          </template>
        </el-table-column>
        <!-- 电话 -->
        <el-table-column label="联系电话" prop="tel" />
        <!-- 设备名称 -->
        <el-table-column label="设备名称" prop="device_name" />
        <!-- 状态 -->
        <el-table-column label="状态">
          <template #default="{row}">
            {{ row.status===1 ? '已维修' : '待受理' }}
          </template>
        </el-table-column>
        <!-- 报修描述 -->
        <el-table-column label="报修描述" prop="desc" />
        <!-- 创建时间 -->
        <el-table-column label="创建时间">
          <template #default="{row}">
            {{ formatTimeThis(row.create_time) }}
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column fixed="right" label="操作">
          <template #default="{row}">
            <el-button
              type="text"
              size="small"
              @click="editRepair(row.id)"
            >查看并处理</el-button>
            <el-button type="text" size="small" @click="delTheData(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="float:right;padding: 10px 0 40px 0">
        <el-pagination
          :current-page="formRepair.current"
          :page-sizes="[5, 10, 300, 400]"
          :page-size="formRepair.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
    <EditRepair
      ref="addDialog"
      :drawer.sync="drawer"
      :select-home="selectHome"
    />
  </div>
</template>

<script>
import { getRepairDataApi, getSelectHomeApi, delRepairApi } from '@/api/service'
import EditRepair from './components/edit-repair.vue'
import dayjs from 'dayjs'
export default {
  name: 'RepairPage',
  components: {
    EditRepair
  },

  data() {
    return {
      drawer: false,
      count: 0,
      formRepair: {
        current: 1,
        pageSize: 10,
        community_code: '',
        status: '',
        create_time: ''
      },
      selectHome: [],
      tableData: [],
      nullImg: 'https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714'
    }
  },

  created() {
    this.initData()
    this.getSelectHome()
  },
  methods: {
    // 渲染主页
    async initData() {
      const { data: res } = await getRepairDataApi(this.formRepair)
      // console.log(res)
      this.count = res.count
      this.tableData = res.rows
      // console.log(this.tableData)
    },
    // 分页
    handleSizeChange(val) {
      this.formRepair.current = 1
      this.formRepair.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.formInline.current = val
      this.initData()
    },
    // 搜索框
    async getSelectHome() {
      const res = await getSelectHomeApi()
      this.selectHome = res.data
    },
    // 图片数据处理
    splitStr(str) {
      return str.split(',')
    },
    // 转换时间
    formatTimeThis(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 删除
    async delTheData(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?')
      await delRepairApi(id)
      this.$message.success('删除成功')
      if (this.formRepair.current > 1 && this.tableData.length === 1) {
        this.formRepair.current--
      }
      this.initData()
    },
    // 搜素
    async serachData() {
      if (this.formRepair.create_time) {
        this.formRepair.create_time = this.formRepair.create_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await getRepairDataApi({
        pageSize: 999,
        current: 1,
        create_time: this.formRepair.create_time,
        status: this.formRepair.status,
        community_code: this.formRepair.community_code
      })
      this.tableData = res.rows
      this.count = res.count
      // console.log(this.tableData)
    },
    // serachData() {
    //   this.tableData = this.newList.filter(item => item.community_code === this.formRepair.community_code ||
    //   item.status === this.formRepair.status)
    //   // console.log(this.tableData)
    // },
    // 重置
    resect() {
      this.formRepair = {}
      this.initData()
    },
    editRepair(id) {
      this.drawer = true
      this.$refs.addDialog.getComplainDetail(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  .el-form-item {
    margin-right: 22px;

  ::v-deep .el-input__inner{
     height: 35px;
    line-height: 35px;
    width: 200px;
  }
  }

  .btn {

    // float: right;
    padding-top: 40px;
    // margin-right: 10px;
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
  ::v-deep .el-table__row{
    height: 100px;
  }
}
</style>

